<template>
  <div class="hello">
    <van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" size="5rem"/>
   <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 3rem'}">
  文字
</van-divider>
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell
    v-for="item in list"
    :key="item"
    :title="item"
  />
</van-list>

</div>
</template>

<script>
import {
  Switch,
  Divider,
  List
} from 'vant';
export default {
    components: {
      [Switch.name]:Switch,
      [Divider.name]:Divider,
      [List.name]:List,
  },
  data() {
   return {
      checked: true,
      list: [132],
      loading: false,
      finished: false
    };
  },
    methods: {
       onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
